<!DOCTYPE html>

<html lang="en">

<head>

    <style>
 

        /* Styling the body */

        * {

            margin: 0px;

            padding: 0px;

        }
 

        /* Styling the first parallax's 

        height, width and background color */

        .parallax-1 {

            width: 100%;

            height: 600px;

            background: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20210402175040/back22.jpg');

            background-size: 100% 100%;

            background-attachment: fixed;

        }
 

        /* Styling the title of first parallax */

        .parallax-1 h2 {

            margin: auto;

            position: relative;

            left: 500x;

            top: 300px;

            width: 250px;

            height: 32px;

            padding: 10px;

            background-color: black;

            color: white;

            text-align: center;

        }
 

        /* Styling the second parallax's 

        height, width and background color */

        .parallax-2 {

            width: 100%;

            height: 600px;

            background: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20210402175040/back22.jpg');

            background-size: 100% 100%;

            background-attachment: fixed;

        }
 

        /* Styling the title of second parallax */

        .parallax-2 h2 {

            margin: auto;

            position: relative;

            left: 500x;

            top: 300px;

            width: 250px;

            height: 37px;

            padding: 10px;

            background-color: white;

            color: black;

            text-align: center;

            font-size: 30px;

            font-family: Verdana;

        }
 

        /* Styling the content or paragraph */

        .para-1 {

            padding: 50px;

            background-color: black;

            color: white;

            font-size: 17px;

        }
 

        /* Styling the content or paragraph */

        .para-2 {

            text-align: center;

            padding: 25px;

            font-size: 17px;

            font-family: Verdana;

            background-color: black;

            color: white;

        }

    </style>

</head>
 

<body>
 

    <!-- Giving title of the first parallax -->

    <div class="parallax-1">

        <h2>SUSHANT GAURAV</h2>

    </div>
 

    <!--Content of first parallax -->

    <div class="para-1">

        <p>

            Thankyou for showing interest, 

            here is a quick story of me and

            this website. My programming 

            journey started back in 2019, 

            few months before I started 

            studying CSE in LNCT Bhopal. 

            I am currently in my second 

            year and doing Technical 

            Content Writing Internship

            at GeeksForGeeks. I like 

            coding all kind of problems 

            from the very basic like adding 

            numbers to the complex ones like

            competitive programming problems.

            I love making projects and games.

            Infact this website is one of my 

            Web Development Projects which 

            is built using HTML and CSS.<br>

            <br>Languages known : C Language, 

            C++, JAVA, Python, JavaScript, 

            MySQL.<br> IT Constructs : Data 

            Structures and Algorithm, OOP, 

            HTML, CSS, LINUX, and Git & GitHub.

        </p>

    </div>
 

    <!-- Giving title of the first parallax -->

    <div class="parallax-2">

        <h2>PROJECTS</h2>

    </div>
 

    <!--Content of first parallax -->

    <div class="para-2">

        <p>

              Calendar ☀  

            Tic-Tac-Toe ☀  

            Quiz Game ☀  

            Survey Form ☀  

            Chat Bot in C ☀  

            Tribute Webpage ☀  

            Portfolio Website ☀  

            Guess the Number ☀  

            Rock Paper Scissor ☀ 

            To-Do List using JS ☀  

            Notes Taker using JS ☀  

            BMI Calculator using JS ☀ 

            Loan Calculator using JS ☀  

            Travel Management System ☀  

            Random Password Generator ☀  

            Different Management Systems

        </p>

    </div>
 

    <!--This will be same as first parallax-->

    <div class="parallax-1">

        <h2>ACHIEVEMENTS</h2>

    </div>
 

    <div class="para-2">

        <p>

              Technical Content Writer 

            Intern at GeeksForGeeks ☀

              Microsoft Learn Student 

            Ambassador - Beta ☀  

            Participant in GirlScript Summer 

            of Code 2021 ☀  

            Mentored HackTX Hackathon

        </p>

    </div>

</body>

</html>
